<template>
  <view
    class="tz-cell"
    v-bind="$attrs"
    :class="{ 'tz-cell__border': $attrs.border }"
  >
    <view v-if="$attrs.title" class="tz-cell-label">
      <text v-if="$attrs.required" class="required">*</text>
      {{ $attrs.title }}
    </view>
    <view class="tz-cell-value"> <slot /></view>
  </view>
</template>
<script>
export default {
  name: "TzCell",
  components: {},
  inheritAttrs: false,
  props: {},
  setup() {
    return {};
  },
};
</script>

<style lang="scss">
.tz-cell {
  font-size: 17px;
  color: $black;
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  line-height: 44px;

  &.tz-cell__border::after {
    position: absolute;
    box-sizing: border-box;
    content: " ";
    pointer-events: none;
    right: 0;
    bottom: 0;
    left: 0;
    border-bottom: 1px solid $border-color;
    transform: scaleY(0.5);
    @extend %px-media;
  }

  .tz-cell-label {
    width: 130px;
    color: $title-color;
    flex: none;
    text-align: left;
    .required {
      color: #f95e5a;
    }
  }
  .tz-cell-value {
    flex: 1;
    display: flex;
    align-items: center;
    position: relative;
  }
}
</style>
